<template>
  <div class="w1280">
    <el-row class="content">
      <el-col class="left_aside">
        <el-card class="box-card hot_article">
          <el-carousel height="385px" direction="vertical" interval="0">
            <el-carousel-item
              class="hot_articleList"
              v-for="item in 5"
              :key="item"
            >
              <li>
                <a href="#" @click="toArticleDetail">
                  <img
                    src="../static/upload/5d0f139a37a54adf8f1d65cf0632fcdd.png"
                    width="400"
                    height="272"
                    alt=""
                  />
                  <div class="info">
                    <b>2023-08-11</b>
                    <h3>Vue后台管理系统模板推荐</h3>
                    <p>
                      在我们进行网站管理时一个好的后台管理模板是非常重要的，推荐
                      几款后台模板给大家，也是自己常用的模板
                    </p>
                  </div>
                </a>
              </li>
            </el-carousel-item>
          </el-carousel>
          <el-button type="primary" class="title">推荐文章</el-button>
        </el-card>
        <ul class="articleList" v-for="(item, index) in 10" :key="index">
          <li v-for="i in 10" :key="i">
            <a href="#" @click="toArticleDetail">
              <el-card shadow="hover">
                <el-row>
                  <el-col :span="12"
                    ><img
                      src="../static/upload/1691589550076.jpg"
                      width="390"
                      height="213"
                  /></el-col>
                  <el-col :span="12">
                    <div class="info">
                      <h3>基于Vue从零开始搭建个人博客系列</h3>
                      <div class="notice">
                        <span
                          ><i class="el-icon-timer"></i>发表于：2023-08-11</span
                        >
                        <span><i class="el-icon-s-comment"></i>17条评论</span>
                      </div>
                      <p>
                        在我们进行网站管理时一个好的后台管理模板是非常重要的，推荐
                        几款后台模板给大家，也是自己常用的模板在我们进行网站管理时一个好的后台管理模板是非常重要的，推荐
                        几款后台模板给大家，也是自己常用的模板在我们进行网站管理时一个好的后台管理模板是非常重要的，推荐
                        几款后台模板给大家，也是自己常用的模板在我们进行网站管理时一个好的后台管理模板是非常重要的，推荐
                      </p>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </a>
          </li>
        </ul>
      </el-col>
      <el-col class="right_aside index_right_aside">
        <RightSlider :userInfo="userInfo"></RightSlider>
      </el-col>
    </el-row>
    <ToolsBar></ToolsBar>
  </div>
</template>

<script>
import RightSlider from "@/components/rightSlider.vue";
import ToolsBar from "@/components/toolsBar.vue";
export default {
  components: {
    RightSlider,
    ToolsBar,
  },
  data() {
    return {};
  },
  methods: {
    toArticleDetail() {
      this.$nextTick(() => {
        // 以服务的方式调用的 Loading 需要异步关闭
        this.$router.push("/articleDetail");
      });
    },
  },
};
</script>

<style>
@import "../assets/css/index.css";
</style>

